<template>
  <div class="guaranteerList">
    <div class="guaranteerItem" v-for="item in guaranteerList" :key="item.id">
      <div class="userInfo">
        <div class="userName">
          <img src="./img/icon_recomment.png" alt="" class="advantar" />
          <div>{{ item.playersName }}</div>
        </div>
        <div class="userState">
          <div class="state">授权状态-<span>已完成</span></div>
          <div class="state" style="margin-left: 30rpx">
            风险状态-<span>未通过</span>
          </div>
        </div>
      </div>
      <div class="relation">
        保证人关系：<span>{{ item.playersRelationType }}</span>
      </div>
      <div class="idCard">
        身份证：<span>{{ item.playersCardNo }}</span>
      </div>
      <div class="phone">
        <div class="phoneNum">
          <img src="./img/phone.png" alt="" class="phoneIcon" />
          <div>
            手机号：<span>{{ item.playersPhone }}</span>
          </div>
        </div>
        <div class="sendMsg" @click="sendMsg(item.id)">
          <img src="./img/dianjifuwu.png" alt="" class="sendMsgIcon" />
          <div>点击发送授权短信</div>
        </div>
      </div>
      <div class="doBtn">
        <img
          @click="checkGuaranterr(item.id)"
          src="./img/btn_look.png"
          alt=""
          class="btnIcon"
        />
        <img
          @click="deleteGuaranteer(item.id)"
          src="./img/btn_look2.png"
          alt=""
          class="btnIcon"
        />
      </div>
    </div>
  </div>
  <div class="addGuaranteer" @click="addGuaranteer">
    <img src="./img/new_icon.png" alt="" class="addIcon" />
    <div>新增</div>
  </div>
  <div class="closeBtn">关闭</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
import { onLoad } from "@dcloudio/uni-app";
const guaranteerList = reactive([]);
let param = null;
onLoad((option) => {
  param = JSON.parse(option.value);

  http.perRechPlayersEntityList({ orderId: param.orderId }).then((res) => {
    guaranteerList.length = 0;
    guaranteerList.push(...res.data);
  });
});
// 新增保证人
const addGuaranteer = () => {
  if (guaranteerList.length < 3) {
    let params = {
      isheck: false,
      orderId: param.orderId,
    };
    wx.navigateTo({
      url: "../guarantorAdd/guarantorAdd?value=" + JSON.stringify(params),
    });
  } else {
    wx.showToast({
      title: "最多可以添加3个保证人",
      icon: "none",
      duration: 1000,
      mask: true,
    });
  }
};
// 删除保证人
const deleteGuaranteer = (id) => {
  http
    .perRechPlayersEntityDelete(id)
    .then((res) => {
      http.perRechPlayersEntityList({ orderId: param.orderId }).then((res) => {
        guaranteerList.length = 0;
        guaranteerList.push(...res.data);
      });
      wx.showToast({
        title: "删除保证人成功",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    })
    .catch((err) => {
      wx.showToast({
        title: "删除保证人失败",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    });
};
// 参与人信息查询
const checkGuaranterr = (id) => {
  param = {
    isCheck: true,
    id,
  };
  wx.navigateTo({
    url: "../guarantorAdd/guarantorAdd?value=" + JSON.stringify(param),
  });
};
// 发送授权短信
const sendMsg = (id) => {
  http
    .perRechPlayersEntitySendSms({ id })
    .then((res) => {
      wx.showToast({
        title: "授权短信发送成功",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    })
    .catch((err) => {
      wx.showToast({
        title: "授权短信发送失败",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    });
};
</script>

<style scoped lang="scss">
.guaranteerList {
  .guaranteerItem {
    margin: 30rpx 24rpx;
    padding: 30rpx;
    height: 282rpx;
    background: #fff;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .userInfo {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userName {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 28rpx;
        color: #333;
        .advantar {
          width: 52rpx;
          height: 52rpx;
          margin-right: 15rpx;
        }
      }
      .userState {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .state {
          border-radius: 8rpx;
          width: 201rpx;
          height: 42rpx;
          line-height: 42rpx;
          text-align: center;
          border: 1rpx dashed #c0c0c0;
          background-color: #f6f6f6;
          color: #666666;
          font-size: 20rpx;
        }
      }
    }
    .relation,
    .idCard {
      font-size: 24rpx;
      color: #666;
      margin-left: 11rpx;
    }
    .phone {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .phoneNum {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 24rpx;
        color: #666;
        .phoneIcon {
          margin-left: 11rpx;
          width: 25rpx;
          height: 25rpx;
          margin-right: 20rpx;
        }
      }
      .sendMsg {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 24rpx;
        color: #297cfb;
        .sendMsgIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
        }
      }
    }
    .doBtn {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .btnIcon {
        width: 139rpx;
        height: 48rpx;
        margin: 0 15rpx;
      }
    }
  }
}
.addGuaranteer {
  margin: 30rpx 24rpx;
  background-color: #fff;
  width: 700rpx;
  height: 340rpx;
  border: 1rpx dashed #3483fb;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #2f80fb;
  border-radius: 12rpx;
  .addIcon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 28rpx;
  }
}
.closeBtn {
  width: 590rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
  color: #fff;
  background-color: #3277f2;
  margin: 30rpx 80rpx;
  opacity: 0.5;
}
</style>
